<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <!--
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <script src="../../../bower_components/vue/dist/vue.min.js"></script>
    -->
</head>

<body>
    <div id="app">
        {{msg}}
        <com></com>
    </div>

    <script>
        //编写一个组件
        var component = Vue.extend({
            template: '<h3 @click="change()">我是组件模板，{{msg}}</h3>',
            //组件里面放数据，data必须是函数的形式，函数必须返回一个对象(json)
            data() {
                return {
                    msg: '我是json对象'
                }
            },
            methods: {
                change: function () {
                    alert("貌似只能写一个标签。");
                }
            },
        });

        //给组件取别名，并注册组件(全局组件)
        Vue.component("com", component);

        //vue实例
        new Vue({
            el: "#app",
            data: {
                msg:"message"
            }
        });
    </script>
</body>

</html>